<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>发布求购</title>
    <link rel="stylesheet" href="../../css/public.css">
    <link rel="stylesheet" href="../../css/shangchuan.css">
    <link rel="stylesheet" href="../../css/tanchuang.css">
    <link rel="stylesheet" type="text/css" href="../../css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="../../css/uploader.css" />
    <style>
        .my_content{
            width: 100%;
            padding:0.3rem 0.2rem;
            box-sizing: border-box;
        }
    </style>
    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script src="../../js/tanchuang.js"></script>
    <script src="../../js/resize.js"></script>
    <script type="text/javascript" src="../../js/webuploader.js" ></script>
    <script>
        $(window).ready(function(){
            resetFont();
        });
        $(window).resize(function(){
            resetFont();
        });
        $(function(){
            /*规格选择*/
            $(".my_spec li").click(function(){
                thisA=$(this);
                if($(this).index()<4){
                    winShow("my_in");
                    $(".yes").on("click",function(){
                        if($(".my_num").val()==""){
                            winHide("my_in");
                        }else{
                            thisA.html($(".my_num").val());
                            winHide("my_in");
                            $(".my_num").val("")
                            thisA.addClass("select").siblings().removeClass("select").each(function(){
                                $(this).html($(this).attr("_alt"));
                            })
                        }
                        $(".yes").off("click");
                    });
                    $(".no").on("click",function(){
                        winHide("my_in");
                        $(".no").off("click");
                    });
                }else{
                    thisA.addClass("select").siblings().removeClass("select").each(function(){
                        $(this).html($(this).attr("_alt"));
                    })
                }
            });

            /*形态选择*/
            $(".my_shape li").click(function(){
                $(this).addClass("select").siblings().removeClass("select");
            })
        })
    </script>
</head>
<body>
<div class="my_content">
    <div class="my_block clearfix">
        <p class="my_tit">品种名称<span class="red">*</span></p>
        <div class="my_input">
            <input class="my_shuru" type="text" placeholder="请输入品种名称">
            <p class="my_tip">字多字少，错别字，均会影响供求匹配的精准性，填名称时，务必正确规范</p>
        </div>
    </div>
    <div class="my_block clearfix">
        <p class="my_tit">形态<span class="red">*</span></p>
        <div class="my_input">
           <ul class="my_shape clearfix">
               <li>独杆</li>
               <li>球型</li>
               <li>丛生</li>
               <li>其他</li>
           </ul>
        </div>
    </div>
    <div class="my_block clearfix">
        <p class="my_tit">规格<span class="red">*</span></p>
        <div class="my_input">
            <ul class="clearfix my_spec">
                <li _alt="高度（厘米）">高度（厘米）</li>
                <li _alt="粗度（厘米)">粗度（厘米)</li>
                <li _alt="冠径（厘米">冠径（厘米）</li>
                <li _alt="长度（厘米）">长度（厘米）</li>
                <li>其他</li>
            </ul>
        </div>
    </div>
    <div class="my_block clearfix">
        <p class="my_tit">采购范围<span class="red">*</span></p>
        <div class="my_input">
            <select name="procince" id="prov" class="my_area" style="width: 2.2rem;">
                <option value="0">河北省</option>
            </select>
            <select name="procince" id="city" class="my_area" style="width: 2.2rem;">
                <option value="0">保定市</option>
            </select>
        </div>
    </div>
    <div class="my_block clearfix">
        <p class="my_tit">需求数量</p>
        <div class="my_input">
            <input class="my_shuru w353" type="text" placeholder="请输入数量">
        </div>
    </div>
    <div class="my_block clearfix">
        <p class="my_tit">联系电话<span class="red">*</span></p>
        <div class="my_input">
            <input class="my_shuru w353" type="text" placeholder="请输入您的联系电话">
        </div>
    </div>
    <div class="my_block clearfix">
        <p class="my_tit">截止日期<span class="red">*</span></p>
        <div class="my_input">
            <input class="my_shuru w353" type="text" placeholder="请输入您的联系电话">
        </div>
    </div>
    <div class="my_block clearfix">
        <p class="my_tit">苗木图片<span class="red">*</span></p>
        <div class="my_input" >
            <div class="project_box" style="width: 5.4rem;">
                <div class=""  id="uploader-demo">
                    <div id="fileList" class="uploader-list"></div>
                    <div class="add-a"><div id="filePicker"><em class="iconfont">＋</em></div></div>
                </div>
                <input id="addNum" type="hidden" value="0">
            </div>
        </div>
        <script>
            jQuery(function() {
                var $ = jQuery,
                        $list = $('#fileList'),
                        ratio = window.devicePixelRatio || 1,
                        thumbnailWidth =40 * ratio,
                        thumbnailHeight = 40 * ratio,
                        uploader;
                uploader = WebUploader.create({
                    auto: true,
                    resize: true,
                    fileNumLimit:6,
//                    swf: '/Public/html/xzzg/js/Uploader.swf', //add by fz
//                    server: '/index.php/Home/Public/uploadFile', //add by fz
                    pick: '#filePicker',
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });
                uploader.on( 'fileQueued', function( file ) {
                    var pic_id = 'WU_FILE_' +  $("#addNum").val();
                    var $li = $(
                                    '<div id="' + pic_id + '" class="file-item thumbnail">' +
                                    '<img>' +
                                    '<div class="info">' + file.name + '</div>' +
                                    '<p class="but-del"><em class="clos"></em></p>'+
                                    '</div>'
                            ),
                            $img = $li.find('img');

                    $list.append( $li );


                    uploader.makeThumb( file, function( error, src ) {
                        if ( error ) {
                            $img.replaceWith('<span>����Ԥ��</span>');
                            return;
                        }

                        $img.attr( 'src', src );
                    }, thumbnailWidth, thumbnailHeight );//$("#addNum")[0]=document.getElementById
                    var addNum=Number($("#addNum")[0].value);//��ͼƬ��ǿ��ת����int��ʽ
                    var num=addNum+1;
                    $("#addNum")[0].value=num;


                    $(".but-del").on("click",function(){
                        uploader.removeFile( file );
                        //add by fz
//                        var url = $(this).next().val();
//                        var urls = $('.js_building_thumbs').val();
//                        var urls = _.filter(urls.split(','), function (item) {
//                            return item != '' && item != url;
//                        });
//                        $('.js_building_thumbs').val(urls.join(','));
                        //end add

                        $(this).parent().remove();
                        $(".add-a").show();
                        var addNum=Number($("#addNum")[0].value);//
                        var num=addNum-1;
                        $("#addNum")[0].value=num;
                        return;
                    })


                });


                uploader.on( 'uploadProgress', function( file, percentage ) {
                    var $li = $( '#'+file.id ),
                            $percent = $li.find('.progress span');

                    // �����ظ�����
                    if ( !$percent.length ) {
                        $percent = $('<p class="progress"><span></span></p>')
                                .appendTo( $li )
                                .find('span');
                    }

                    $percent.css( 'width', percentage * 100 + '%' );
                });

                uploader.on( 'uploadSuccess', function(file ,response) {
                    if(response.status=='200') {
                        var pic_id = 'WU_FILE_' + parseInt($("#addNum").val() - 1);
                        // add by fz
                        $('.js_building_thumbs').val($('.js_building_thumbs').val() + ',' + response.url);
                        // end add
                        var addNum = $("#addNum")[0].value;
                        var input = "<input class='num' id='num_" + pic_id + "' type='hidden'  value='" + response.url + "'/>";//�������ص�һ���ļ�����
                        $('#' + pic_id).append(input);
                    }
                    $( '#'+pic_id ).addClass('upload-state-done');
                    $( '#'+pic_id + ' img').attr('src',response.url);
                });

                uploader.on( 'uploadError', function( file,response ) {
                    var $li = $( '#'+file.id ),
                            $error = $li.find('div.error');


                    if ( !$error.length ) {
                        $error = $('<div class="error"></div>').appendTo( $li );
                    }


                });


                uploader.on( 'uploadComplete', function( file ) {
                    $( '#'+file.id ).find('.progress').remove();
                });

                uploader.on('error', function(handler) {
                    if(handler=="Q_EXCEED_NUM_LIMIT"){
                        document.getTag("div").style.display="none";
                    }
                });
            });
        </script>
    </div>
    <div class="my_block clearfix">
        <p class="my_tit">其他要求</p>
        <div class="my_input">
            <textarea class="my_textarea" placeholder="填写您的文字描述"></textarea>
        </div>
    </div>
    <div class="my_block my_caozuo clearfix">
        <a href="javascript:void (0);" class="my_sure float_l">自发确认</a>
        <a href="javascript:void (0);" class="my_sure float_r">转发确认</a>
    </div>
    <div class="my_caption clearfix">
        <span>说明：</span>
        <p>转发求购信息时务必求证真实有效后再转发，多次转发无效求购信息易被举报虚假</p>
    </div>
</div>
<div class="tanchuang my_in none">
    <div class="tanchuangCont">
        <div class="tipmess hasp">
            <h3>请输入</h3>
            <p><input type="text" class="my_num"></p>
        </div>
        <div class="decsion clearfix twobtn">
            <a href="javascript:void(0);" class="no">取消</a>
            <a href="javascript:void(0);" class="yes">确定</a>
        </div>
    </div>
</div>
</body>
</html>